<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS Image Hover Effects</title>
  <link rel="stylesheet" href="./src/style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <p class="header">Image Hover Effects</p>
  <div class="content">
     <div class="wrapper">
      <div class="box vintage">
        <img src="https://source.unsplash.com/900x900/?vintage" alt="EMMYLOU">
        <h2>EMMYLOU</h2>
        <p>I'll be your Emmylou and I'll be your June</p>
      </div>
    </div>
    <div class="wrapper">
      <div class="box w-content">
        <img src="https://source.unsplash.com/900x900/?art,history" alt="Jenny of Oldstones">
        <div class="frame">
          <h2>Jenny of Oldstones</h2>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div class="box postcard">
        <img src="https://source.unsplash.com/900x900/?ocean,sunset" alt="BOX">
        <h2>The Pursuit of  <p class="hide">HAPPINESS</p></h2>
      </div>
    </div>
    <div class="wrapper">
      <div class="box zoom-in">
        <img src="https://source.unsplash.com/900x900/?italy,travel" alt="Postcards From Italy">
        <h2>Postcards From Italy</h2>
        <p>And I will love to see that day</p>
      </div>
    </div>
    <div class="wrapper">
      <div class="box blury-card" >
        <img src="https://source.unsplash.com/900x900/?street,travel" alt="Blue Ridge Mountains">
        <div class="frame">
          <h2>Blue Ridge</h2>
          <p>MOUNTAINS</p>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div class="box zoom-out">
        <img src="https://source.unsplash.com/900x900/?photography" alt="Melody Noir">
        <div class="frame">
          <h2>MELODY <span>NOIR</span></h2>
          <p>Tell me where the wind is blowing 'cause that's where the music's going</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- partial -->
  
</body>
</html>
